<template>
    <div class="box">
        <div class="function" @click="PMclick">
            <img src="/src/assets/image/空气质量.png">
            <p>空气质量</p>
        </div>
        <div class="function" @click="temperature">
            <img src="/src/assets/image/大气温度.png">
            <p>气温</p>
        </div>
        <div class="function" @click="rain">
            <img src="/src/assets/image/降水量.png">
            <p>降水量</p>
        </div>
        <div class="function" @click="echart_kunming">
            <img src="/src/assets/image/控制台.png">
            <p>控制台</p>
        </div>
        <div class="function" @click="siteClick">
            <img src="/src/assets/image/大气监控站点.png">
            <p>监控站点</p>
        </div>
        <div class="function" @click="sunClick">
            <img src="/src/assets/image/光照.png">
            <p>光照强度</p>
        </div>
        <div class="function" @click="scaleClick">
            <img src="/src/assets/image/测距.png">
            <p>测距</p>
        </div>
        <div class="function" @click="choice_search">
            <img src="/src/assets/image/查询.png">
            <p>拉框查询</p>
        </div>
    </div>
</template>

<script setup>
import { mapStore } from '@/stores/counter';
import { PM_city } from '@/Hooks/pmHook';
import { rotation } from '@/Hooks/rotationHook';
import { functionNav } from '@/Hooks/functionHook';
import { rainy } from '@/Hooks/rainyHook';
import { echart } from '@/Hooks/echartHook';
import { site } from '@/Hooks/siteHook';
import { sun } from '@/Hooks/sunHook';
import { search } from '@/Hooks/searchHook';
const store = mapStore()
const { PMclick } = PM_city()
// const { earth_rotate } = rotation()
const { temperature } = functionNav()
const { rain } = rainy()
const { echart_kunming } = echart()
const { siteClick } = site()
const { sunClick } = sun()
const { choice_search } = search()

const scaleClick = () => {
    store.isScale = !store.isScale
}
</script>

<style scoped lang="scss">
.box {
    display: flex;
    justify-content: space-around;
    height: 50px;
    width: 600px;
    z-index: 1000;
    position: fixed;
    bottom: 4px;
    left: 31%;

    .function {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
    }

    img {
        width: 25px;
        height: 25px;
        border: solid 1px #0e76ae;
        border-radius: 10px;
        background: #0e76ae;
        padding: 3px;
    }

    p {
        color: #fff;
        font-size: 12px;
    }
}
</style>
